const React = require( 'react' );
const { View, StyleSheet, ToastAndroid, Platform } = require( 'react-native' );
const {
	JDDevice,
	JDDialog,
	JDConfirmDialog,
	JDTouchable,
	JDText,
	JDNetwork,
	JDButton,
	JDRouter,
	JDNativeSystem,
	JDScrollView,
} = require( '@areslabs/jdreact-core-lib' );
const { NavigationBar } = JDRouter;
const FormatUtils = require('../../components/FormatUtils');

class JDNativeSystemExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
			 dialogShow: false,
			 lightStatusBar:false,
			 result: '',
			 phoneNumber: '13800000000',
			  selectDate:new Date(),};

        let phoneNumber = "13800000000";
    }

    renderInputItem = (hint, textChangeCallback) => {
		return <View>
			<JDText>{hint}</JDText>
			<JDTextInput
				style={styles.textInput}
				onChangeText={textChangeCallback}
			/>
		</View>;
	};

    onPhoneNumberInputChange = (text) => {
		this.setState({phoneNumber:text})
		console.log("onStartTimeInputChange, text:" + text)
	};

    render() {
		return (
			<View style={styles.wrapper}>
				<NavigationBar Title="JDNativeSystem "/>
				<JDScrollView style={styles.body}>
					
					<JDTouchable onPress={ () =>

					JDNativeSystem.getClientVersion().then((data) => alert(data),
						(error) => alert(error))
                    }>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>获取ClientVersion</JDText>
                        </View>
                    </JDTouchable>
					<JDTouchable onPress={ () =>
					JDNativeSystem.getCurrentModuleVersion('JDReactAPIDemos').then((data) => alert(data),
					(error) => alert(error))
                    }>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>获取CurrentModuleVersion</JDText>
                        </View>
                    </JDTouchable>
					<View style={{height: 30}}></View>
				</JDScrollView>

			</View>
		);
	}
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1
	},
	body: {
		flex: 1,
		padding: JDDevice.getRpx( 20 )
	},
	btn: {
		borderRadius: JDDevice.getDpx( 4 ),
		backgroundColor: '#f23030',
		justifyContent: 'center',
		alignItems: 'center',
		height: JDDevice.getRpx( 80 ),
		marginBottom: JDDevice.getRpx( 20 )
	},
	btnText: {
		color: '#FFF'
	},

	customDialogStyle: {
		borderWidth: 5,
		borderColor: '#F00'
	},

	dialogContent: {},
	title: {
		height: JDDevice.getRpx( 80 ),
		borderBottomWidth: JDDevice.getDpx( 1 ),
		borderColor: '#555',
		paddingLeft: JDDevice.getRpx( 20 ),
		alignItems: 'center',
		justifyContent: 'center'
	},
	dialogBody: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
		paddingLeft: JDDevice.getRpx( 20 ),
		height: JDDevice.getRpx( 340 )
	},
	textInput: {
        height: JDDevice.getDpx(150),
        fontSize: JDDevice.getFontSize(28),
        marginBottom: 10
    }
});

module.exports = JDNativeSystemExample;
